<template>
<x-main>
	<view class="x-space-between top x-container">
		<view class="name">{{user.name}}，您好</view>
<!--		<view class="select">全部门店</view>-->
    <x-choose @onChange="onChange" v-model="state.storeId" label="全部门店" type="remote" options="STORE"></x-choose>
	</view>

  <view class="x-container">
    <view class="nav">
    <img class="bg" src="/static/image/home/nav_bg.png">
    <view class="content">
      <view class="title">{{navBody.title}}</view>
      <view class="desc">{{navBody.desc}}</view>

      <view class="x-center">
        <view @click="onClick(navBody.type)" class="btn x-center">{{navBody.btn}}</view>
      </view>
    </view>
  </view>
<!--    <view class="link">还未入驻，申请成为商家>></view>-->
  </view>
  <!-- 账单概览 -->
  <x-box title="账单概览" bgColor="#f5f5f5">
    <view slot="tools" class="x-row">
      <view class="x-small-left" :class="{'item': state.timeActive != item.value,'item-active': state.timeActive == item.value}" @click="onActive(item)" v-for="(item, index) in TIME_SLOT">{{item.label}}</view>
    </view>
    <view class="x-space-between x-container x-full x-small-top">
      <view class="grid" v-for="(grid, index) in state.statList">
        <view class="content">
          <view class="title">{{grid.title}}</view>
          <view class="value">{{billStat[grid.field] || 0}}元</view>
        </view>
      </view>
    </view>
  </x-box>

  <!-- 账单逾期 -->
  <x-box title="账单逾期" bgColor="#f5f5f5">
    <view class="x-normal-top">
      <x-empty :show="$emptyArray(records)"></x-empty>
      <x-bill-item :data="data" v-for="(data, index) in records" :key="index"></x-bill-item>
    </view>
  </x-box>
</x-main>
</template>

<script setup>
  import XChoose from '@/components/lib/choose';
  import XBillItem from '@/components/logic/bill/item'
  import companyStore from '@/stores/modules/company'
  import userStore from '@/stores/framework/user';
  import billStore from '@/stores/modules/bill';
  import aliyunStore from '@/stores/modules/aliyun';
  const BillStore = billStore();
  const CompanyStore = companyStore();
  const UserStore = userStore();
  const AliyunStore = aliyunStore();
  const {user} = storeToRefs(UserStore);
  const {companyInfo} = storeToRefs(CompanyStore);
  const {billStat, records} = storeToRefs(BillStore);
  import {Helper, Msg, Constant} from "core";
  import {computed, reactive} from "vue";
  import {storeToRefs} from "pinia";
  import {onLoad} from "@dcloudio/uni-app";
  const state = reactive({
    timeActive: 1,
    storeId: "",
    sign: false,
    statList: [
      {title: "账单应收", field: "totalAmount"},
      {title: "账单代收", field: "paidAmount"},
      {title: "账单逾期", field: "overdueAmount"}
    ],
  })

  onLoad(async () => {
    CompanyStore.getInfo();
    state.sign = await AliyunStore.checkSign();
  })

  onShow(async () => {
    loadData();
  })

  const loadData = async () => {
    let {start, end} = Helper.formatQueryDate("01");
    BillStore.stat(start, end, state.storeId);
    await BillStore.getList(1, 20, {billState: [Constant.BILL.KEY.OVERDUE, Constant.BILL.KEY.IN_OVERDUE_PAY], beginTime: start, endTime: end, storeId: state.storeId})
  }

  /**
   * 切换门店
   * @param e
   */
  const onChange = (e) => {
    state.storeId = e;
    loadData();
  }

  /**
   * 切换时间
   * @param item
   */
  const onActive = (item) => {
    state.timeActive = item.value;
    let {start, end} = Helper.formatQueryDate(item.value);
    BillStore.stat(start, end);
  }

  /**
   * 创建订单
   * @param type
   * @returns {Promise<void>}
   */
  const onClick = async (type) => {
    if(type == 'order') {
      uni.navigateTo({url: "/pages/order/create"})
      return;
    }

    if(type == 'open') {
      doOpen();
    }
  }

  const doOpen = () => {
    // #ifdef MP-ALIPAY
    my.getAuthCode({
      success: async (res) => {
        if(Helper.empty(res.authCode)) {
          Msg.error("获取授权失败");
          return;
        }

        let flag = await UserStore.bind(res.authCode)
        if(flag) {
          uni.navigateTo({url: "/pages/mine/sign/index"})
        }
      },
      fail: (err) => {
        Msg.error(err.errorMessage);
      }
    })
    // #endif
  }

  const navBody = computed(() => {
    let body = {btn: "", title: "", desc: ""}
    if(! state.sign){
      body.btn = "立即开通"
      body.title = "服务包开通后即可使用"
      body.desc = "在线收款、逾期代收、付款提醒"
      body.type = "open"
    } else {
      body.btn = "创建订单";
      body.title = "风控管理专家帮您收租"
      body.desc = "适用于房租、店租，支持按天、周、月、季收取"
      body.type = "order";
    }
    return body;
  })

</script>

<style scoped lang="less">

	.top {
		width: 100%;
		color: #6A6A6A;
		font-size: 28rpx;
	}

  .nav {
    width: 100%;
    position: relative;
    height: 290rpx;

    .bg {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .content {
      position: absolute;
      top: 0;
      padding: 36rpx 44rpx;
      box-sizing: border-box;
      height: 218rpx;
      width: 100%;

      .title {
        font-size: 36rpx;
        font-weight: bold;
      }

      .desc {
        font-size: 24rpx;
        color: #999999;
      }

      .btn {
        margin-top: 60rpx;
        width: 400rpx;
        height: 80rpx;
        color: #ff8900;
        border: 1px solid #ff8900;
        border-radius: 40rpx;
      }
    }
  }

  .link {
    margin-top: 30rpx;
    color: #3d3d3d;
    font-size: 24rpx;
    text-align: center;
    width: 100%;
  }

  .item {
    color: #999;
    font-size: 26rpx;
  }

  .item-active {
    color: #ff8900;
    font-size: 26rpx;
  }

  .grid {
    width: 32%;
    height: 200rpx;

    .content {
      background: #FFFFFF;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #F2F2F2;
      padding: 36rpx 22rpx;
      box-sizing: border-box;
      width: 100%;
      height: 100%;

      .title {
        font-weight: 400;
        font-size: 28rpx;
        color: #6A6A6A;
      }

      .value {
        margin-top: 50rpx;
        font-weight: 500;
        font-size: 32rpx;
        color: #FF8900;
      }
    }
  }

</style>
